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“> TW93 
& 市 团队 4 年 ， 懂 一 点 用 技术 思路 解决 业务 头疼 的 事 
@ 前 端 ， 会 一 点 Rust / Swift/Python /设计 /独立 产品 


VY 热爱 开源 ， 是 Pake / 妙 言 /潮流 周刊 /XRender 的 作者 


新 一 代 前 端 发 展 的 困境 与 破局 


一 、 何 为 新 一 代 前 端 ? 
二 、 发 展 的 困境 在 哪儿 ? 
=. MPRA? 


四 、 你 会 好 奇 的 点 ? 


2007 ~ 2009 年 2010 ~ 20134F 2014 ~ 20174 


。 前端 设计 与 开发 的 基本 模式 eR ANA SnD AAR e RDR H5 拉 太 体系 成 长 之 路 


e |ES as future platform e CommonJS 时 代 的 JS 模块 e Æ ES6 Æ JS 未 来 

e Enterprise Ajax in PHP 。 无 障碍 访问 Aria In TaoBao e H Node.js 构建 海量 页 面 滥 染 服务 
e Flash WERF E 2 P5 。 前 端 MVC 探讨 及 实践 e 手机 淘宝 Hybrid 性 能 优化 实战 

。 从 YUI2 到 YUIS 看 前 端的 演变 。 下 动作 先前 端 产 品 的 探索 © ME) RRR R 

。 模板 语言 与 大 前 端 。 前 端 性 能 监控 与 优化 专场 e 企业 级 lol 应 用 开发 新 境界 


2018 年 之 后 


。 设计 稿 竺 合生 成 代码 平台 

。 基 于 WeblDE 的 云端 开发 架构 

。 REUS UE BY SSR 
e State Of Deno in 2022 

e WebAssembly 与 Serveriess 

« FA Rust 和 Node 开发 高 性 能 模块 


要 求 的 变化 - 2017 年 的 前 端 技术 栈 


Ka Personol Recommendotion! 
Front-end 
| 


Learn the Basics 


[e ] «— [aes 


Getting Deeper 


y Task Runners M. 
| JovoScript 


AAPA AAFPIAÈ A 


Responsive Web 


Preprocessors 


jas SUE mail 
PostCSS 


SUITCSS 


Choose a Framework 


Methodologies 


Module Loader/Bundler OOCSS 
Paid SMACSS 


人 


o 


Vue js Dive Deep CSS3 
Ember JS Browserify 


一 局 | (= 


GOF Design Patterns 
Learn different testing techniques 


a 


Start Building 


要 求 的 变化 - 2023 年 的 前 端 技术 栈 


© ) Personal Recommendation / Opinion 


For resources and other roadmaps 


v) Alternative Option - Pick this or purple 


https://roadmap.sh 


Order in roadmap not strict (Learn anytime) Are you just getting started? 


I wouldn't recommend 


Fro nt-en d Visit the Beginner Version 


How does the internet work? 


What is HTTP? 


Learn the basics 


What is Domain Name? 


Writing Semantic HTML What is hosting? 


Forms and Validations DNS and how it works? 


Accessibility Browsers and how they work? 


1 SEO Basics | 
I | | 


Notifications 


Device Orientation 


Calculating, Measuring 


and improving performance 


“9  Wuepress 


Performance Best Practices 


v Jekyll Eleventy € 


Credentials 


Learn different Web Nextjs v 


APIs used in PWAs 


v Nuxt.js 


OH < < C 


Tauri 


React Native Gs 


NativeScript @% 


Continue Learning with following relevant tracks 


| TypeScript Roadmap Nodejs Roadmap 


这 就 是 新 一 代 前 端 … 


€ 大 概 2017 年 后 ， 发 现 前 端 不 再 变 来 变 去 了 


Q 技术 上 可 以 造 的 轮子 不 多 了 ， 好 写 的 代码 都 被 写 了 
© 慢 慢 地 不 再 聚焦 前 端 技术 本 身 ， 而 是 AE, SREE 


AVercel An. c Ko] 


新 一 代 前 端 发 展 的 困境 与 破局 


一 、 何 为 新 一 代 前 端 ? 
二 、 发 展 的 困境 在 哪儿 ? 
三 、 如 何 去 破 局 ? 


四 、 你 会 好 奇 的 点 ? 


哪些 内 容 国 内 比较 关注 ? 


.一 文章 榜 -mA 


1 也 谈 一 下 30+ 程序 员 的 出 路 è 10.017 HE 
前 端 双 越 老师 "t 


2 。 过 度 设计 的 架构 师 们 ， 应 该 拿 去 你 天 » 3.816 5 
- 库 森 学 长 S r | uiis 
如 果 失 业 了 ， 我 们 还 能 干 喻 ? TT 
* KES ic 

4 Wine: git daret aco ceo e 3.339 热度 


12 aomyh 


17 “天 天 摸 鱼 度 日 ，34 专 的 我 做 裁 了 。。 。 1368 热度 


2 Ivresse- 2.3k 浏览 . 36 互动 . 4 收藏 
18 ”让 web 再 次 伟大 一 一 用 canvaskit 实现 超级 丝 滑 的 原 .… 1278 热度 
; itt 


@ 7c00. 1.5k 浏览 . 65 Bah. 58 收藏 


19 CVer 从 0 入 门 NLP (=) 一 一 GPT、BERT 模 型 
1,224 热度 
@ 秃头 小 苏 . 2.5k 浏览 . 12 互动 . 5 收藏 


20 RATER swe - 第 三 部 分 ， 语 法 分 析 
1143 热度 
©) 聪 聪 正在 递归 下 降 ， 2.4k 浏览 . 9 互动 . 6 收藏 


21 ”使 用 图 像 分 割 技术 实现 视频 特效 1134 热度 


(8) ZackSock - 2.5k 浏览 . 3 互动 . 10 收藏 


22 HAWE: 你 之 前 的 工作 发 布 过 npm 包 吗 ? 1,098 执 度 


— ^ 一 全 二 一 


Trending 


See what the GitHub community is most excited about this week. 


Spoken Language: Chinese - Language: Any ~ 


Developers 


chr 
To 
Me 
h unl 
cH 
Ir 


E 
Book 3 (RFR) | SRE: 从 加 减 乘除 到 机 器 学 习 ; ESR; 欢迎 继续 纠 


@ Python W 4,523 Y 663 Built by É 


= 
) | Stes: 从 加 减 乘除 到 机 右 学 习 ; ER! 


Book 5 (#iit2 fh 
LW 1,546 


t? 311 Built by & 


@ Jupyter Notebook 


Date range: This week - 


vy Star ~ 


Y 80 stars this week 


sy Star | ~ 


Yr 74 stars this week 


“> Ctar -— 


LD /AA | Yn Igo IS Aba WAGE Y 9 
xd Python3, JavaScript, Shell, Typescript 的 定时 任务 管理 平台 (Timed task management platform 
supporting Python3, JavaScript, Shell, Typescript) 


@ TypeScript W 12,080 kd 2,635 Built by £g p i. p - YW 84 stars this week 
g chika0801 / sing-box-examples Yr Str | v 
sing-box 配置 示例 

会 469 多 87 Builtby(2 9l; YY 43 stars this week 
g EhViewer-Nekolnverter / EhViewer Yr Star | ~ 
@ A fork of EhViewer-Nekolnverter, feature requests are not accepted, but contributions are welcome. 

@kotin Yv 1463 Ys Builtby¥OY.. TAQ YY 33 stars this week 
日 XayahSuSuSu / Android-DataBackup wy Star + 
数据 备份 DataBackup for Android 

Q Kotlin 1095 €? 46  Builtby i D € we &i Yi 32 stars this week 
4 coolsnowwolf / lede Yr Star | ~ 


Lean's LEDE source 


Gc 27174 ”19373 Butoy o» YY 49 stars this week 


那 国 外 的 程序 员 都 关注 哈 呢 ? 


Trending 


See what the GitHub community is most excited about this week. 


Developers Spoken Language: Any ~ Language: Any ~ 


g microsoft / autogen 
Enable Next-Gen Large Language Model Applications. Join our Discord: https://discord.gg/pAbnFJrkgZ 
@ Jupyter Notebook 747,826 776 Buitby 8 OS 


g usebruno / bruno 
Opensource IDE For Exploring and Testing Api's (lightweight alternative to postman/insomnia) 


JavaScript $4 5,006 °% 154 Built by A ws ao Ss © 


tH appwrite / appwrite 


Date range: This week - 


vy Star | ~ 


YI 3,521 stars this week 


yy Star ~v 


YI 2,997 stars this week 


YY Star v 


Ww Python M 16,9606 6 0,009 DUIIt Dy b 4 t Er Wy wy b IUU Stals UNS WCOK 


g PHP-CS-Fixer / PHP-CS-Fixer Yr Star | ~ 
A tool to automatically fix PHP Coding Standards issues 

@PHP 712,212 % 1562 Built by Bw eS E YY 116 stars this week 
4 jasontaylordev / CleanArchitecture © Sponsor yy Star | ~ 
Clean Architecture Solution Template for ASP.NET Core 

@c# 从 13.663 9307 Buty QOTO S YY 294 stars this week 
日 codecrafters-io / build-your-own-x Yr Star | ~ 
Master programming by recreating your favorite technologies from scratch. 

vy 220,846 多 21409 Builtry@ Sh» YY 1,993 stars this week 
g leptos-rs / leptos Yr Star | ~ 
Build fast web applications with Rust. 

GO Rust 3Y12225 453 GBultoy 55 $9 ^ YY 187 stars this week 
g MichMich / MagicMirror © Sponsor y¥ Star ~ 


MagicMirror? is an open source modular smart mirror platform. With a growing list of installable modules, 
the MagicMirror? allows you to convert your hallway or bathroom mirror into your personal assistant. 


@ JavaScript {Y 18,282 % 4054 Built wv AGOGO 3 W 154 stars this week 


前 端 发 展 的 困境 在 哪儿 ? 


纯 属 玩笑 口吻 的 前 端 版 《大 梦 》 


€ d: 一 个 尿 门 一 伍 微 前 端 框架 、 一 和 套 组 件 库 、 一 套 低 代码 方案 、 一 套 SSR 方案 ， 该 怎么 办 ? 
O rt: 好 写 的 代码 都 被 写 了 ， 和 好 到 的 花子 痢 和 朗 过 了 ， 去 场 页 面 又 很 无 聊 ， 新 东西 又 学 不 动 ， 该 怎么 办 ? 
Q 天 花 板 : 前 端 薄 ， 高 级 岗位 少 ， 纯 做 业务 难 晋 升 ， 地 位 还 不 高 ， 做 到 顶 都 难 到 技术 管理 层 ， 该 怎么 办 ? 


行情 不 太 好 


© 人 才 挤 挤 : 从 之 前 的 【人才 济济 1 SüXEBy [00000005] ， 现 在 找 工作 的 人 能 力也 很 强 ， 该 怎么 办 ? 
多 行情 不 太 好 : ERREEN, FESLO ED, MARAR, mAN, REAA? 


新 一 代 前 端 发 展 的 困境 与 破局 


> 


~ à - 


一 、 何 为 新 一 代 前 端 ? 
- \ Machine 


二 、 发 展 的 困境 在 哪儿 ? JavaScript Ma erm 


三 、 如 何 去 破 局 ? 人 DL 


四 s AK HF AT 的 点 IANN fi FrontEnd BackEnd 


b 


® Ri, SREB JS RF 


新 一 代 前 端 有 哈 优 势 ? 


PE ATT RS 


越 来 越 多 计算 机 专业 出 身 的 同学 
综合 基础 很 不 锻 ， 和 学 习 能 为 很 好 


前 端 属于 天 然 就 热爱 折腾 的 岗位 
见 过 前 面 几 年 前 端 高 速 变 化 发 展 


具 甸 服务 端 能 为 不 少 都 会 Node 
做 一 个 独立 可 用 产品 不 需求 助人 


天 然 距离 使 用 者 的 操作 交互 最 近 
对 性 能 / 体验 / 效率 工具 很 敏锐 


黑客 与 画家 


HACKERS & PAINTERS 


[ 美 ] PAUL GRAHAM & 


lue 


快乐 地 写 代 码 比 其 他 事 更 重要 


d BERE BOR US 
持续 的 兴趣 和 热情 很 有 魔力 ， 多 去 找 解决 问题 的 满足 感 和 创造 有 用 工具 的 兴奋 感 


找到 自己 最 舒服 的 干 活 方 式 
生活 中 的 性 格 可 以 不 改 ， 工 作 中 的 习惯 可 以 去 改 ， 用 目 己 的 最 擅长 方式 拿 结果 


-© TH. A 
一 定 需 要 意识 到 工作 是 为 了 更 好 的 生活 ， 和 学 习 是 为 了 更 好 的 工作 ， 这 三 者 可 很 互补 


89 不 快乐 一 般 是 由 于 授 烂 和 努力 都 不 够 纯粹 ， 导 致 过 得 很 纠结 。 


D 工程 师 应 该 很 明白 地 做 事情 


第 见 误区 


讲 东西 的 时 候 别 人 Get 不 到 来 了 需求 立马 一 把 梭 直 接 干 上 线 完 没 哈 问 题 就 不 翻 篇 了 


Q 理 清楚 > 讲 明白 > 做 明白 


* 工程 师 的 定义 : 通过 科学 和 技术 知识 解决 问题 的 专业 人 员 ， 不 是 码 农 ， 不 是 资源 ， 是 脑 为 工作 者 。 

x 如 何 理 清 问题 : 找到 最 原始 的 需求 问题 来 源 ， 为 什么 需要 解决 这 个 问题 ， 用 思维 模型 去 拆 问题 。 

* 如 何 讲 明白 事 : 用 RFC 的 标准 去 写 文 档 ， 站 在 听众 的 视角 去 代入 问题 ， 尽 可 能 简单 明白 ， 不 要 赋 能 。 

x 如何 做 明白 事 : 当 你 都 可 以 讲 明日 自己 要 做 的 东西 了 ， 尽 管 去 做 就 好 ， 除 非 你 不 会 癌 人 代码， 一 般 可 做 好 。 


(3 不 做 传统 前 端 ， 去 做 产品 工程 师 


E 什么 是 传统 前 端 工 程 师 ? 


1. A HTML, CSS, JavaScript 3KTZ FEE TEfRIT A FR PARE mR, ey co aAA 
2. 做 得 好 的 标准 一 般 是 写 得 快 、 效 果 好 、 性 能 体验 好 、 代 码 清 晰 好 维护 、 能 沉淀 些 能 力 


A 那 什么 是 产品 工程 师 ? 
1. 定义 : 能 够 将 痛 点 / 想法 用 技术 方式 转换 成 产品 让 其 发 挥 更 大 的 作用 


2. 边界 : 不 局 限于 岗位 、 技 术 ， 更 注重 用 技术 和 产品 思路 去 解决 问题 痛 点 解决 
3. 过 程 : Jh / 想法 -> 产品 思路 -> 交互 稿 -> 开发 -> 最 小 可 用 产品 -> 运营 工程 师 
4 


. 素质 : BBY, Har, ZERE RMR. SIA. TÉ SLE RA 


© 做 产品 工程 师 的 路 径 
将 技术 思路 或 方案 转变 成 可 被 销售 的 产品 。 


C) 发 现 痛 点 这 个 问题 你 是 否 觉得 很 痛 但 没有 好 用 的 解决 方案 ? 


Qe 需求 判断 -> 提出 方案 -> 方案 技术 可 行 性 分 析 


Vr 
wv 


7 
4 = 
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UN 


(3 mBi3z5 18 流程 图 -> 产品 原型 线 框图 -> 产品 高 保 真 


G) 快速 开发 优先 解决 最 痛 的 问题 ， 快 速 开 发 上 线 第 一 个 版 本 


清晰 美观 的 使 用 介绍 ， 及 时 获取 用 户 反 馈 并 迭代 代码 只 是 一 部 分 


D 做 一 个 给 业务 帮忙 的 前 端 


四 灵魂 拷问 : KARELSKE 这 句 话 有 没有 问题 ? 
V. 一 般 可 以 做 些 哈 ? 


1. 记 住 数据 : 业务 的 现状 数据 是 怎么 样 的， 目标 看 什么 ? 当前 头疼 急需 解决 的 事情 是 什么 ? 

2. 视角 转换 : 从 工程 师 写 代码 的 视角 往 业 务 用 户 视角 去 思考 问题 ， 也 需 持 续 训 练 ， 琢 磨 我 可 做 啥 ? 

3. 找 聪 明 人 : 发 铬 到 项 目 组 最 联 明 、 最 懂 这 一 块 的 人 ， 多 去 请 教 ， 多 去 交流 ， 一 起 互补 搞 些 事情 。 
4. 解决 问题 : 利用 前 端 工程 师 的 专业 优势 ， 在 过 程 中 去 发 现 痛 点 ， 甚 至 走访 用 户 ， 解 决 大 家 头疼 的 点 。 
5. FREN: 多 和 使 用 者 去 交 朋 友 ， 多 和 交互 设计 师 去 合作 ， 多 给 后 端 、 测 试 、 产 品 、 运 营 去 帮忙 。 


$ 什么 样 的 人 做 得 比较 好 ? 
用 技术 方案 解决 业务 问题 的 人 | | 敢于 填 坑 改变 不 好 现状 的 人 | | 有 想法 好 点 子 能 够 落地 的 人 


O 提升 自己 的 工程 师 实力 


^. 工程 师 实 为 讲 得 土 一 点 融 是 可 以 写 到 简历 上 证 明 你 水 平 的 东西 


A 都 包括 哪些 方面 ? 


专业 技能 能 讲 明白 能 把 事情 不 断 学 习 懂 做 易于 
最 基础 事情 做 成 折腾 有 想法 使 用 的 产品 


假如 你 做 的 工作 是 你 很 喜欢 干 的 事情 ， 事 做 好 了 又 促进 你 赚 更 多 钱 ， 那 你 就 超级 幸福 了 


新 一 代 前 端 发 展 的 困境 与 破局 


一 、 何 为 新 一 代 前 端 ? 
二 、 发 展 的 困境 在 哪儿 ? 
三 、 如 何 去 破 局 ? 


四 、 你 会 好 奇 的 点 ? 


前 端 在 业余 时 间 可 以 做 什么 ? 


Q? A: End 


